<template>
  <!-- 控制面板 -->
  <div v-show="showProperty" class="select-panel">
    <el-tabs>
      <el-tab-pane
        v-if="showSelect"
        label="设置审批人"
      >
        <el-form>
          <el-form-item label="设置节点标题">
            <!-- 设置节点标题 -->
            <el-input
              v-model="currentTitle"
              style="width:80%"
              placeholder="请填写节点的标题"
              size="mini"
              @input="changeTitle"
            />
          </el-form-item>
          <el-form-item label="选择审批人">
            <el-radio-group v-model="userType" size="mini" @input="changeType">
              <el-radio v-for="item in userTypes" :key="item.value" size="mini" :disabled="item.value === 2 " :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="userType===6" label="选择审批成员">
            <!-- 选择树节点 -->
            <el-input v-model="approvalMember.name" size="mini" placeholder="点击选择审批成员" style="width:80%" disabled />
            <el-tree ref="myTree" node-key="id" :data="approvalNodeList" :props="defaultProps" @node-click="selectNode">
              <!-- 插槽内容 -->
            </el-tree>
          </el-form-item>
          <el-form-item v-if="userType===1" label="选择指定的成员">
            <!-- 选人 -->
            <el-select
              v-model="currentUser"
              filterable
              multiple
              style="width:80%"
              size="mini"
              placeholder="请选择人员"
              @change="changeUser"
            >
              <!-- 选择人 -->
              <el-option v-for="item in peoples" :key="item.email" :label="item.userName" :value="item.email" />
            </el-select>
          </el-form-item>
          <!-- 主管类型 -->
          <el-form-item v-if="userType===2" label="选择主管类型">
            <el-radio-group v-model="mangerLevel" size="mini" @change="changeLevel">
              <el-radio v-for="item in mangerLevels" :key="item.value" size="mini" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 会签类型 -->
          <el-form-item label="多人审批时采用的审批方式">
            <el-radio-group v-model="multiApproveMode" @change="changeMode">
              <el-radio v-for="item in modeType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        v-if="showCondition"
        label="设置条件"
      >
        <el-form>
          <el-form-item label="设置节点标题">
            <!-- 设置节点标题 -->
            <el-input
              v-model="currentTitle"
              style="width:80%"
              size="mini"
              placeholder="请填写节点的标题"
              @input="changeTitle"
            />
          </el-form-item>
        </el-form>
        <!-- 条件 -->
        <condition ref="myCondition" @conditionChange="changeCondition" />
      </el-tab-pane>
    </el-tabs>
    <!--属性面板 -->
    <!-- 类型 -->

  </div>

</template>

<script>
import { getUserList, getProcessList, getUserProcessList } from '@/api/approval'
import NodeType from '@/constant/nodeType'
import { joinType, operateType, varibales, userTypes, mangerLevels, modeType } from '@/constant/normalData'

import Condition from './condition'
export default {
  components: {
    Condition
  },
  props: {
    //  当前节点
    currentNode: {
      default: null
    }
  },
  data() {
    return {
      modeType,
      userTypes,
      mangerLevels,
      multiApproveMode: null, // 会签类型
      currentUser: null,
      userType: null, // 主管的类型
      mangerLevel: null,
      currentTitle: null, // 当前节点标题
      NodeType, // 节点类型
      approvalNodeList: [], // 审批节点列表
      defaultProps: {
        label: 'name'
      },
      approvalMember: {} // 审批成员
    }
  },
  computed: {
    showProperty() {
      return !!this.currentNode
    },
    showSelect() {
      if (this.currentNode) {
        const { NodeType } = this.currentNode.getData()
        return NodeType === this.NodeType.APPRPVAL_MAN || NodeType === this.NodeType.SEND_MAN
      }
      return false
    },
    showCondition() {
      if (this.currentNode) {
        const { NodeType } = this.currentNode.getData()
        return NodeType === this.NodeType.CONDITION
      }
      return false
    }
  },
  watch: {
    currentNode() {
      if (this.currentNode) {
        const { NodeType, options, title } = this.currentNode.getData() // 获取业务数据
        this.currentTitle = title // 设置标题
        if (NodeType === this.NodeType.APPRPVAL_MAN || NodeType === this.NodeType.SEND_MAN) {
          // 如果是指定人的
          this.userType = options ? options.userType : null
          if (this.userType === 6) {
            this.approvalMember = options && options.options ? options.options : {}
            this.$nextTick(() => {
              if (this.$refs.myTree && this.approvalMember.id) {
                const node = this.$refs.myTree.getNode(this.approvalMember.id) // 获取当前节点
                if (node && node.parent) {
                  // 找到父节点的数据
                  this.$refs.myTree.store.nodesMap[node.parent.data.id].expanded = true // 设置父节点展开状态
                }
                this.$refs.myTree.setCurrentKey(this.approvalMember.id) // 选中当前节点
              }
            })
          }
          this.mangerLevel = options ? options.mangerLevel : null
          if (this.userType === 1) {
            // 处理响应之后的用户列表
            this.currentUser = options ? options.options.map(item => item.email) : null
          }
          this.multiApproveMode = options ? options.multiApproveMode : null
        } else if (NodeType === this.NodeType.CONDITION) {
          this.$nextTick(() => {
            this.$refs.myCondition.conditions = options || []
          })
        }
      }
    }
  },
  created() {
    this.getUserList()
    this.getProcessList() // 获取审批列表成员
  },
  methods: {
    // 选择某个节点
    async selectNode(node) {
      if (node) {
        const userList = await getUserProcessList(node.id)
        if (userList.length) {
          // 选中了审批用户
          this.approvalMember = node
          if (this.currentNode) {
            this.currentNode.setData({ options: { userType: this.userType, options: node }})
            this.currentNode.setAttrs({
              text: {
                text: node.name
              }
            })
          }
        } else {
          this.$message.warning('需要给该节点配置审批人')
        }
      }
    },
    // 获取审批成员
    async getProcessList() {
      this.approvalNodeList = await getProcessList()
    },
    async getUserList() {
      const { records } = await getUserList({ current: 1, size: 1000 })
      this.peoples = records
    },
    // 人员切换
    changeUser(options) {
      // 人员切换
      if (this.currentNode) {
        // 筛选出选中的指定成员列表
        const userList = this.peoples.filter(item => {
          return options.some(obj => obj === item.email)
        })
        this.currentNode.setData({ options: { userType: this.userType, options: userList }})
        // 将成员名拼接成 字段
        const userNames = userList.map(item => item.userName).join(',')
        this.currentNode.setAttrs({
          text: {
            text: userNames
          }}
        )
      }
    },
    // 切换类型
    changeType() {
      this.currentUser = null
      this.currentNode.setData({ options: { userType: this.userType }})
      if (this.userType === 4) {
        this.currentNode.setAttrs({
          text: {
            text: '发起人自己'
          }
        })
      }
    },
    changeLevel() {
      if (this.currentNode) {
        this.currentUser = null
        this.currentNode.setData({ options: { mangerLevel: this.mangerLevel, options: [] }})
        this.currentNode.setAttrs({
          text: {
            text: `主管 > ${this.findLabel(this.mangerLevels, this.mangerLevel)}`
          }
        })
      }
    },
    changeMode() {
      if (this.currentNode) {
        this.currentNode.setData({ options: { multiApproveMode: this.multiApproveMode }})
      }
    },
    // 条件切换
    changeCondition(conditions) {
      if (this.currentNode) {
        this.currentNode.setData({ options: conditions }) // 设置条件数据
        const str = this.connectCondition(conditions).trim()
        this.currentNode.setAttrs({
          text: {
            text: str || '条件'
          }
        })
      }
    },
    // 连接条件
    connectCondition(conditions) {
      // const arr/ = []
      console.log(conditions)
      return conditions.map(item => {
        return ` ${this.findLabel(joinType, item.options.lastJoin)}  ${this.findLabel(varibales, item.options.leftVaribale)}  ${this.findLabel(operateType, item.options.operate)} ${this.dealValue(item.options.valueVariable)}`
      }).join('')
    },
    // 查找标签
    findLabel(arr, value) {
      const obj = arr.find(item => item.value === value)
      return obj ? obj.label : ''
    },
    // 处理value
    dealValue(value) {
      if (typeof value === 'string' && value) {
        return `'${value}'`
      }
      return value
    },
    // 标题发生改变
    changeTitle(value) {
      if (this.currentNode) {
        this.currentNode.setData({ title: value })
        this.currentNode.setAttrs({
          title: {
            text: value
          }
        })
      }
    }
  }
}
</script>

<style >
 .select-panel {
   padding: 20px;
   margin-left: 0;
 }
 .is-current .el-tree-node__label {
   color: red  !important
 }
</style>
